import { View, Text } from '@tarojs/components'
import { useState } from 'react'
import { Card, Button, Tag } from '@nutui/nutui-react-taro'
import Taro, { useLoad } from '@tarojs/taro'
import './index.less'

export default function Promotions() {
  const [userInfo, setUserInfo] = useState(null)

  const promotions = [
    {
      id: 1,
      title: '新用户专享',
      subtitle: '首次下单立减20元',
      description: '所有洗护服务均可使用，有效期30天',
      discount: '20元',
      minAmount: '满50元可用',
      validUntil: '2025-02-28',
      color: 'linear-gradient(135deg, #ff6b9d 0%, #ff8a80 100%)',
      status: 'available'
    },
    {
      id: 2,
      title: '会员专享',
      subtitle: '满100减30',
      description: '会员用户专享优惠，可叠加使用',
      discount: '30元',
      minAmount: '满100元可用',
      validUntil: '2025-03-31',
      color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
      status: 'available'
    },
    {
      id: 3,
      title: '周末特惠',
      subtitle: '周末下单8.8折',
      description: '每周六日下单享受8.8折优惠',
      discount: '8.8折',
      minAmount: '无门槛',
      validUntil: '长期有效',
      color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
      status: 'available'
    },
    {
      id: 4,
      title: '春节大促',
      subtitle: '全场5折起',
      description: '春节期间全场服务5折起，数量有限',
      discount: '5折起',
      minAmount: '无门槛',
      validUntil: '2025-02-15',
      color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
      status: 'coming'
    }
  ]

  useLoad(() => {
    checkLogin()
  })

  const checkLogin = () => {
    try {
      const user = Taro.getStorageSync('userInfo')
      setUserInfo(user)
    } catch (error) {
      console.log('获取用户信息失败')
    }
  }

  const handleReceive = (promotion) => {
    if (!userInfo) {
      Taro.showToast({
        title: '请先登录',
        icon: 'none'
      })
      setTimeout(() => {
        Taro.navigateTo({ url: '/pages/login/index' })
      }, 1500)
      return
    }

    if (promotion.status === 'coming') {
      Taro.showToast({
        title: '活动即将开始',
        icon: 'none'
      })
      return
    }

    Taro.showToast({
      title: '优惠券领取成功',
      icon: 'success'
    })
  }

  const getStatusText = (status) => {
    switch (status) {
      case 'available':
        return '立即领取'
      case 'coming':
        return '即将开始'
      case 'expired':
        return '已过期'
      default:
        return '立即领取'
    }
  }

  const getStatusColor = (status) => {
    switch (status) {
      case 'available':
        return '#4facfe'
      case 'coming':
        return '#ffa726'
      case 'expired':
        return '#999'
      default:
        return '#4facfe'
    }
  }

  return (
    <View className='promotions-page'>
      <View className='header'>
        <Text className='title'>优惠活动</Text>
        <Text className='subtitle'>更多优惠等你来领取</Text>
      </View>

      <View className='promotions-list'>
        {promotions.map(promotion => (
          <Card key={promotion.id} className='promotion-card'>
            <View 
              className='promotion-header'
              style={{ background: promotion.color }}
            >
              <View className='promotion-info'>
                <Text className='promotion-title'>{promotion.title}</Text>
                <Text className='promotion-subtitle'>{promotion.subtitle}</Text>
                <Text className='promotion-discount'>{promotion.discount}</Text>
              </View>
              <View className='promotion-status'>
                <Tag 
                  color={getStatusColor(promotion.status)}
                  textColor='white'
                  size='small'
                >
                  {promotion.status === 'available' ? '可领取' : 
                   promotion.status === 'coming' ? '即将开始' : '已过期'}
                </Tag>
              </View>
            </View>

            <View className='promotion-content'>
              <View className='promotion-details'>
                <Text className='detail-item'>📝 {promotion.description}</Text>
                <Text className='detail-item'>💰 {promotion.minAmount}</Text>
                <Text className='detail-item'>⏰ 有效期至 {promotion.validUntil}</Text>
              </View>

              <Button 
                type={promotion.status === 'available' ? 'primary' : 'default'}
                size='large'
                className='receive-btn'
                disabled={promotion.status !== 'available'}
                onClick={() => handleReceive(promotion)}
              >
                {getStatusText(promotion.status)}
              </Button>
            </View>
          </Card>
        ))}
      </View>

      <View className='tips'>
        <Text className='tips-title'>💡 使用说明</Text>
        <Text className='tips-item'>• 优惠券领取后可在"我的"页面查看</Text>
        <Text className='tips-item'>• 下单时系统会自动选择最优优惠</Text>
        <Text className='tips-item'>• 部分优惠券可叠加使用</Text>
        <Text className='tips-item'>• 过期优惠券将自动失效</Text>
      </View>
    </View>
  )
}